<template>
  <view class="login-container">
    <view class="login-header">
      <text class="title">智慧教室系统</text>
      <text class="subtitle">多端交互平台</text>
    </view>
    
    <view class="login-form">
      <view class="form-item">
        <text class="label">用户名</text>
        <input 
          v-model="form.username" 
          placeholder="请输入用户名" 
          class="input"
        />
      </view>
      
      <view class="form-item">
        <text class="label">密码</text>
        <input 
          v-model="form.password" 
          password 
          placeholder="请输入密码" 
          class="input"
        />
      </view>
      
      <view class="role-selector">
        <text class="label">登录身份</text>
        <view class="role-buttons">
          <button 
            v-for="role in roles" 
            :key="role.value"
            :class="['role-btn', { active: form.role === role.value }]"
            @click="form.role = role.value"
          >
            {{ role.label }}
          </button>
        </view>
      </view>
      
      <button class="login-btn" @click="handleLogin">登录</button>
      
      <view class="demo-accounts">
        <text class="demo-title">测试账号：</text>
        <text>学生: student01 / 123456</text>
        <text>教师: teacher01 / 123456</text>
      </view>
    </view>
  </view>
</template>

<script>
import { api } from '@/utils/request.js'

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        role: 'student'
      },
      roles: [
        { label: '学生', value: 'student' },
        { label: '教师', value: 'teacher' },
        { label: '管理员', value: 'admin' }
      ]
    }
  },
  
  methods: {
    async handleLogin() {
      if (!this.form.username || !this.form.password) {
        uni.showToast({ title: '请输入用户名和密码', icon: 'none' })
        return
      }
      
      try {
        uni.showLoading({ title: '登录中...' })
        
        const res = await api.login(this.form)
        
        if (res.code === 200) {
          // 保存用户信息
          uni.setStorageSync('token', res.data.token)
          uni.setStorageSync('userInfo', res.data.userInfo)
          
          uni.showToast({ title: '登录成功', icon: 'success' })
          
          // 跳转到对应角色页面
          this.redirectByRole(res.data.userInfo.role)
        }
      } catch (error) {
        console.error('登录失败:', error)
        uni.showToast({ 
          title: error.message || '登录失败', 
          icon: 'none' 
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    redirectByRole(role) {
      const routes = {
        student: '/pages/student/schedule/schedule',
        teacher: '/pages/teacher/course/course',
        admin: '/pages/admin/dashboard/dashboard'
      }
      
      setTimeout(() => {
        uni.reLaunch({ url: routes[role] })
      }, 1500)
    }
  }
}
</script>

<style scoped>
.login-container {
  padding: 60rpx 40rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-header {
  text-align: center;
  margin-bottom: 80rpx;
}

.title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

.login-form {
  background: white;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 40rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.input {
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 24rpx;
  font-size: 28rpx;
}

.input:focus {
  border-color: #667eea;
}

.role-selector {
  margin-bottom: 60rpx;
}

.role-buttons {
  display: flex;
  gap: 20rpx;
}

.role-btn {
  flex: 1;
  background: #f5f5f5;
  border: none;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  transition: all 0.3s;
}

.role-btn.active {
  background: #667eea;
  color: white;
}

.login-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10rpx;
  padding: 24rpx;
  font-size: 32rpx;
  margin-bottom: 40rpx;
}

.demo-accounts {
  text-align: center;
}

.demo-title {
  display: block;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #666;
}

.demo-accounts text {
  display: block;
  font-size: 24rpx;
  color: #888;
  margin-bottom: 5rpx;
}
</style>